import {
  BrowserRouter as Router,
  Route,
  Switch,
  Redirect,
} from 'react-router-dom'

import { AuthRoute } from './components/AuthRoute'
import Layout from './pages/Layout'

import Login from './pages/Login'
import ProfileEdit from './pages/Profile/Edit'
import Chat from './pages/Chat'
import Article from './pages/Article'
import SearchPage from './pages/Search'
import './App.scss'
const App = () => {
  return (
    <div className="app">
      <Router>
        <Switch>
          <Route path="/" exact render={() => <Redirect to="/home/index" />} />
          <Route path="/login" component={Login}></Route>
          <Route path="/home" component={Layout}></Route>
          <Route path="/profile/edit" component={ProfileEdit}></Route>
          <Route path="/chat" component={Chat}></Route>
          <Route path="/search" component={SearchPage}></Route>
          <AuthRoute path="/articles/:id">
            <Article />
          </AuthRoute>
        </Switch>
      </Router>
    </div>
  )
}

export default App
